<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script type="text/javascript" src="../js/angularjs.js"></script>
    <script type="text/javascript" src="filter.js"></script>
    <style>
        table tr td {
            padding: 10px;
        }

    </style>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        <table style="border:1px solid red ; margin: 0 auto"  >
            <tr>
                <th>filter名称</th>
                <th>初始值</th>
                <th>操作</th>
                <th>filter后</th>
            </tr>
            <tr>
                <td>转大写</td>
                <td ng-model="name">ARR</td>
                <td><input type="button" value="转大写" ng-click="changeLowerCase(name)"/></td>
                <td>{{bigName}}</td>
            </tr>
            <tr>
               <td>数字格式化</td>
                <td>123.4567898</td>
                <td><input type="button" value="格式化数据" ng-click="formatNumber(123.4567896)"></td>
                <td>{{123.4567898|number:2}}</td>
            </tr>
            <tr>
                <td>currency 货币转换</td>
                <td>53.035</td>
                <td><input type="button" value="货币转换"></td>
                <td>{{50.035|currency:"RMB"}}</td>
            </tr>
            <tr>
                <td>date 日期转换</td>
                <td>{{today}}</td>
                <td><input type="button" value="date:'medium'"></td>
                <td>{{today|date:'medium'}}</td>
            </tr>
            <tr>
                <td>date 日期转换</td>
                <td>{{today}}</td>
                <td><input type="button" value="date:'medium'"></td>
                <td>
                    {{today|date:'yyyy'}} 或
                    {{today|date:'MM'}}   或
                    {{today|date:'dd'}}
                    {{today|date:'HH'}}
                    {{today|date:'mm'}}
                    {{today|date:'ss'}}
                    {{today|date:'yyyy-MM-dd HH:mm:ss'}}
                </td>
            </tr>
            <tr >
                <td collapse="4">
                    数组内容：['a','lerner','to','eat','pizza']
                    按照含有e的字符串进行过滤
                    {{['a','lerner','to','eat','pizza']| filter:'e'}}
                </td>
            </tr>
            <tr >
                <td collapse="4">
                   [{
                    'name':'Ari',
                    'city':'san Francisco',
                    'favorite food':'pizza'
                    },{

                    'name':'Nate',
                    'city':'san Francisco',
                    'favorite food':'india food'
                    }]
                    可以对对象进行过滤
                    {{
                        [{
                        'name':'Ari',
                        'city':'san Francisco',
                        'favorite food':'pizza'
                        },{

                        'name':'Nate',
                        'city':'san Francisco',
                        'favorite food':'india food'
                        }]
                    | filter:{'favorite food':'pizza'}
                    }}

                </td>
            </tr>
            <tr >
                <td collapse="4">
                    --
                    ['a','A','b']
                    可以对对象进行过滤
                    {{
                    ['a','A','b']
                    | isCapitalized
                    }}

                </td>
            </tr>
            <tr >
                <td collapse="4">
                    {{ {name:"chen"} | json }}
                </td>
            </tr>

            <tr >
                <td collapse="4">
                    {{ 'San francisco is very cloudy' |  limitTo:3}}<br/>
                    {{ 'San francisco is very cloudy' |  limitTo:-6}}<br/>
                    {{ ['a','b','c'] | limitTo:1 }}
                </td>
            </tr>
            <tr >
                <td collapse="4">
                    {{ 'San francisco is very cloudy' |  lowercase}}<br/>
                </td>
            </tr>
            <tr >
                <td collapse="4">
                    {{ '123456' |  lowercase}}<br/>
                </td>
            </tr>
            <tr >
                <td collapse="4">
                    {{ 123456 |  number}}<br/>
                </td>
            </tr>
            <tr >
                <td collapse="4">
                    {{ 123456 |  number:2}}<br/>
                </td>
            </tr>
            <tr >
                <td collapse="4">
                   {{
                    [{
                        "name":"Ari",
                        "status":"awake"
                    },{
                        "name":"Q",
                        "status":"sleeping"
                    },{
                        "name":"Nate",
                        "status":"awake"
                    }] |orderBy:'name':true
                    }}
                </td>
            </tr>
        </table>

    </div>
</body>
</html>